<template>
  <div class="yy-page yy-system-dict">
    <div class="yy-system-dict_list">
      <RoomTable @room-selected="onSelectedRoom"/>
    </div>
    <div class="yy-system-dict_device">
      <div class="yy-system-dict_item">
        <DoctorTerminal :selected-room="selectRoom"/>
      </div>
      <div class="yy-system-dict_item">
        <CallTerminal :selected-room="selectRoom"/>
      </div>
      <div class="yy-system-dict_item">
        <ScreenTerminal :selected-room="selectRoom"/>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import RoomTable from "@/views/queue/room/RoomTable.vue";
import DoctorTerminal from "@/views/queue/room/DoctorTerminal.vue";
import CallTerminal from "@/views/queue/room/CallTerminal.vue";
import {QueueRoomModel} from "@/model/QueueRoomModel";
import ScreenTerminal from "@/views/queue/room/ScreenTerminal.vue";

const selectRoom = ref<QueueRoomModel>()

const onSelectedRoom = (room: QueueRoomModel) => {
  selectRoom.value = room
}


</script>
<style scoped lang="scss">
  .yy-page-header {
    border-bottom: 1px solid var(--el-border-color);
  }
  .yy-system-dict {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
    &_list {
      flex: 1;
      min-width: 0;
      border-right: 1px solid var(--el-border-color);
    }
    &_device {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    &_item{
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
      width: 100%;
      height: 100%;
    }
  }
</style>